<template>
  <!-- 确认订单 -->
  <div
    class="basics-layout_body fill-base mt-lg mb-lg pb-20"
    v-loading="loading"
  >
    <div class="title pt-20 pl-20 pb-20">确认订单信息</div>
    <!-- 供应商信息 -->
    <div class="supplier-info ml-20 mr-20 mb-20" v-if="details.seller">
      <div class="mr-30">
        <span>供应商名称：</span>
        <span>{{ details.seller.name }}</span>
      </div>
      <div class="mr-30">
        <span>联系方式：</span>
        <span>{{ details.seller.mobile }}</span>
      </div>
      <div class="mr-30">
        <span>联系邮箱：</span>
        <span>{{ details.seller.email }}</span>
      </div>
    </div>
    <!-- 车辆信息 -->
    <div class="mg-20" v-if="details.product">
      <c-table-template
        border
        :data="[{}]"
        :header-cell-style="{
          background: '#F6F8FA',
          color: '#26282A',
          'font-size': '14px',
          'font-weight': '500',
        }"
      >
        <el-table-column label="车辆信息" align="center" min-width="400">
          <template #default="scope">
            <div class="flex">
              <div class="goods-img">
                <img :src="details.productDetail.prodcutPicList.thumbnailUrl" />
              </div>
              <div class="mr-lg ml-lg goods-info">
                <div class="goods-name">
                  {{ details.product.productTitle }}
                </div>
                <div class="goods-port">
                  <span>启运港：</span>
                  <span>{{ details.harborInfo.country }}</span>
                  <span class="mr-sm ml-sm">{{ details.harborInfo.city }}</span>
                  <span>{{ details.harborInfo.harbor }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          align="center"
          width="250"
          class-name="my-cell"
        >
          <template #default="scope">
            <span>{{ unitProduct?.currency }}</span>
            <span class="ml-sm">
              {{ filters.thousands(unitProduct?.price) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          width="150"
          class-name="my-cell"
        >
          <template #default="scope">
            <span>×{{ route.query.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          align="center"
          width="250"
          class-name="my-cell"
        >
          <template #default="scope">
            <span>{{ unitProduct?.currency }}</span>
            <span class="ml-sm"> {{ sumProduct }}</span>
          </template>
        </el-table-column>
      </c-table-template>
    </div>
    <!-- 表单 -->
    <div class="form-content">
      <el-row>
        <el-col :span="11">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            label-position="left"
          >
            <el-form-item label="付汇方式：" prop="payMode.code">
              <el-radio-group v-model="ruleForm.payMode.code">
                <el-radio
                  :label="item"
                  size="large"
                  v-for="(item, index) in details.productDetail?.payModeList ||
                  []"
                  :key="index"
                >
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="成交方式：" prop="tradeMode.code">
              <el-radio-group
                v-model="ruleForm.tradeMode.code"
                @change="onTradeMode"
              >
                <el-radio
                  :label="item.code"
                  size="large"
                  v-for="(item, index) in details.productDetail
                    ?.tradeModeList || []"
                  :key="index"
                >
                  {{ item.code }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="付款时间：" prop="tradeMode.payTimeNode">
              <el-select
                v-model="ruleForm.tradeMode.payTimeNode"
                placeholder="请选择付款时间"
                class="wh"
                size="large"
              >
                <el-option
                  v-for="(item, index) in timePayments"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <div v-if="ruleForm.tradeMode.code === 'CIF'">
              <el-form-item label="运输方式：" prop="">
                <el-input
                  disabled
                  value="海运"
                  placeholder="请选择运输方式"
                  size="large"
                />
              </el-form-item>
              <el-form-item label="目的港：" prop="endHarborId">
                <c-port-select
                  v-model="ruleForm.endHarborId"
                  placeholder="请选择目的港"
                  size="large"
                  class="wh"
                />
              </el-form-item>
            </div>
            <!--  <div v-else-if="ruleForm.tradeMode.code === 'FOB'">
              <el-form-item label="交车地：" prop="pickupAddress">
                <el-select
                  v-model="ruleForm.pickupAddress"
                  placeholder="请选择交车地"
                  class="wh"
                  size="large"
                >
                  <el-option
                    v-for="(item, index) in options.placeDeliveryList"
                    :key="index"
                    :label="`${item.name} - ${item.addressCountry}${item.addressCity} - ${item.addressDetails}`"
                    :value="`${item.name} - ${item.addressCountry}${item.addressCity} - ${item.addressDetails}`"
                  />
                </el-select>
              </el-form-item> 
            </div>-->
            <el-form-item label="提车方式：" v-if="ruleForm.tradeMode.code === 'CIF'">
              <el-select
                v-model="ruleForm.pickupMode"
                placeholder="请选择提车方式"
                class="wh"
                size="large"
              >
                <el-option
                  v-for="(item, index) in pickupModeType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="给卖家留言：" prop="">
              <el-input
                v-model="ruleForm.orderRemarks"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入给卖家留言"
              />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <!-- 底部 -->
    <div class="order-footer" v-if="details.product">
      <div class="flex-end">
        <div>
          <span class="f-s-14">订单总价：</span>
          <span class="f-s-16 c-EE5B5B mr-sm">
            {{ unitProduct?.currency }}
          </span>
          <span class="f-s-24 f-w-bold c-EE5B5B">{{ sumProduct }}</span>
        </div>
      </div>
      <div class="flex-x-end mt-20">
        <el-button
          :loading="buttonLoading"
          type="primary"
          size="large"
          @click="handleSubmit"
          >提交订单</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import { termsDeliveryType, pickupModeType } from "@/utils/status.js";
import { useRoute, useRouter } from "vue-router";
import { multiplication } from "@/utils/compute.js";
import { deepClone } from "@/utils/index.js";
const route = useRoute();
const router = useRouter();

const ruleForm = ref({
  payMode: {
    code: "TT",
  },
  tradeMode: {
    code: "CIF",
    payTimeNode: "合同后支付",
  },
});
const loading = ref(false);
const buttonLoading = ref(false);
const details = ref({});
const ruleFormRef = ref();
const { proxy } = getCurrentInstance();
const options = ref({
  placeDeliveryList: [], //交车地
});
// 单价
const unitProduct = computed(() => {
  const { code } = ruleForm.value.tradeMode;
  const { tradeModeList } = details.value.productDetail;
  let item = tradeModeList.find((x) => x.code === code);
  if(!item) item = tradeModeList[0]
  return item;
});
// 总价
const sumProduct = computed(() => {
  const n = multiplication(unitProduct.value?.price || 0, route.query.amount);
  return proxy.filters.thousands(n);
});
const timePayments = computed(() => {
  const d = (details?.value?.productDetail?.tradeModeList || []).find((x) => {
    return x.code === ruleForm.value.tradeMode.code;
  });
  return d?.payTimeNodeList || [];
});
onMounted(() => {
  if (route.query.payMode) {
    ruleForm.value.payMode.code = route.query.payMode;
  }
  getOptionsList();
  getById();
});
const onTradeMode = () => {
  ruleForm.value.tradeMode.payTimeNode = "合同后支付";
};
const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const form = deepClone(ruleForm.value);
      form.id = route.query.productId;
      form.amount = route.query.amount;
      form.scene = route.query.scene;
      buttonLoading.value = true;
      try {
        const url = "/buyerOrderList/placeOrder";
        await proxy.$post({ url, data: form });
        buttonLoading.value = false;
        router.go(-1);
      } catch (error) {
        buttonLoading.value = false;
      }
    }
  });
};
const getById = async () => {
  const url = "/product/listing/getById";
  if (route.query.productId) {
    const params = {
      id: route.query.productId,
    };
    loading.value = true;
    const res = await proxy.$get({ url, params });
    console.log(res);
    if(res.productDetail.tradeModeList){
      const t = res.productDetail.tradeModeList[0]
      t.payTimeNode = t.payTimeNodeList[0]
      ruleForm.value.tradeMode = t
    }
    details.value = res;
    loading.value = false;
  }
};
const getOptionsList = () => {
  proxy.$get({ url: "/StoreInfo/list" }).then((res) => {
    options.value.placeDeliveryList = res;
  });
};
const rules = ref({
  "payMode.code": {
    required: true,
    message: "请选择付汇方式",
    trigger: "change",
  },
  "tradeMode.code": {
    required: true,
    message: "请选择成交方式",
    trigger: "change",
  },
  "tradeMode.payTimeNode": {
    required: true,
    message: "请选择付款时间",
    trigger: "change",
  },
  endHarborId: {
    required: true,
    message: "请选择目的港",
    trigger: "change",
  },
});
</script>
<style lang="less" scoped>
:deep(.el-table .my-cell) {
  vertical-align: top;
}
.title {
  font-size: 16px;
  font-weight: 600;
  color: #202020;
}
.supplier-info {
  background: #f6f8fa;
  border-radius: 3px;
  display: flex;
  color: #5e6163;
  font-size: 14px;
  padding: 12px 20px;
}
.goods-img {
  width: 96px;
  height: 72px;
}
.goods-info {
  display: flex;
  flex-direction: column;
  .goods-name {
    font-size: 14px;
    color: #202020;
    margin: auto 0;
    text-align: left;
  }
  .goods-port {
    font-size: 14px;
    color: #7c7c7c;
    font-weight: 400;
    text-align: left;
    margin: auto 0;
  }
}

.form-content {
  margin: 20px;
  padding: 20px;
  background: #f6f8fa;
}
.order-footer {
  margin: 0 20px;
}
</style>